<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/ant-design/antd.min.css">
</head>
<body style="height: 100%; margin: 0">

<style>
    select, input {
        font-size: 14px;
        height: 35px;
        margin-top: 6px;
        padding: 0 5px;
        border: 1px solid #d9d9d9;
        border-radius: 4px
    }
</style>

<div style="padding: 10px;">
    <div style="margin-top: 10px;font-size: 16px;display: inline-block;width: 30%">创建时间:
        <input id="createStart" type="date" style="margin-left: 10px"/>
        -
        <input id="createEnd" type="date"/>
    </div>

    <div style="margin-left: 30px;font-size: 16px;display: inline-block;width: 30%">用户省份:
        <input id="province" name="city" type="text" style="margin-left: 10px;width: 75%"/>
    </div>

    <div style="margin-left: 30px;font-size: 16px;display: inline-block;width: 30%">用户年龄:
        <input id="ageStart" type="text" style="margin-left: 10px;width: 35%"/>
        -
        <input id="ageEnd" type="text" style="width: 35%"/>
    </div>

    <div style="margin-top: 15px;font-size: 16px;display: inline-block;width: 30%">芝麻分数:
        <input id="zhiMaStart" type="text" style="margin-left: 10px;width: 33%"/>
        -
        <input id="zhiMaEnd" type="text" style="width: 33%"/>
    </div>

    <div style="margin-left: 30px;font-size: 16px;display: inline-block;width: 30%">筛选类型:
        <select id="zhiMaScore" type="text" style="width: 75%;margin-left: 10px">
            <option value="">全部</option>
            <option value="1">待履约</option>
            <option value="2">逾期</option>
        </select>
    </div>


    <div style="margin-top: 20px;margin-bottom:20px;margin-left: 40%">
        <button class="ant-btn ant-btn-primary " onclick="cancel()">
            <span> 搜索 </span>
        </button>
        <button class="ant-btn ant-btn-default" style="margin-left: 20px" onclick="update()">
            <span> 重置 </span>
        </button>
    </div>

</div>

<div style="background-color: #fafafa;height: 5px">

</div>

<div id="container1" style="height: 80%;width: 30%;display: inline-block;margin-left: 20px;margin-top: 20px"></div>
<div id="container2" style="height: 80%;width: 30%;display: inline-block"></div>
<div id="container3" style="height: 80%;width: 30%;display: inline-block"></div>

<div id="container4" style="height: 80%;width: 30%;display: inline-block;margin-left: 20px"></div>
<div id="container5" style="height: 80%;width: 30%;display: inline-block"></div>
<div id="container6" style="height: 80%;width: 30%;display: inline-block"></div>


<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script src="/js/LArea.js"></script>
<script src="/js/areaData.js"></script>

<script type="text/javascript">
    let dom_1 = document.getElementById('container1');
    let myChart_1 = echarts.init(dom_1, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    let dom_2 = document.getElementById('container2');
    let myChart_2 = echarts.init(dom_2, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    let dom_3 = document.getElementById('container3');
    let myChart_3 = echarts.init(dom_3, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    let dom_4 = document.getElementById('container4');
    let myChart_4 = echarts.init(dom_4, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    let dom_5 = document.getElementById('container5');
    let myChart_5 = echarts.init(dom_5, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    let dom_6 = document.getElementById('container6');
    let myChart_6 = echarts.init(dom_6, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });

    let app = {};

    let data = [
        {value: 1048, name: 'Search Engine'},
        {value: 735, name: 'Direct'},
        {value: 580, name: 'Email'},
        {value: 484, name: 'Union Ads'},
    ]

    let option;

    option = {
        title: {
            text: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        option.title.text = '综合饼状图';
        option.series[0].data = data
        myChart_1.setOption(option);
        option.title.text = '时间饼状图';
        myChart_2.setOption(option);
        option.title.text = '地区饼状图';
        myChart_3.setOption(option);
        option.title.text = '年龄饼状图';
        myChart_4.setOption(option);
        option.title.text = '芝麻分饼状图';
        myChart_5.setOption(option);
        option.title.text = '类型饼状图';
        myChart_6.setOption(option);

    }

    window.addEventListener('resize', myChart_1.resize);
    window.addEventListener('resize', myChart_2.resize);
    window.addEventListener('resize', myChart_3.resize);
    window.addEventListener('resize', myChart_4.resize);
    window.addEventListener('resize', myChart_5.resize);
    window.addEventListener('resize', myChart_6.resize);
</script>
</body>
</html>